<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="所有预约订单" name="first"><Appointtitie></Appointtitie></el-tab-pane>
    <el-tab-pane label="已预约" name="second"><Appointmenting></Appointmenting></el-tab-pane>
    <el-tab-pane label="已取消" name="third"><AppointmeCancel></AppointmeCancel></el-tab-pane>
    <el-tab-pane label="已完成" name="fourth"><AppointmentFinish></AppointmentFinish></el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import Appointtitie from "../components/AllAppointments.vue";
import Appointmenting from "../components/Appointmenting.vue";
import AppointmeCancel from "../components/AppointmeCancel.vue";
import AppointmentFinish from "../components/AppointmentFinish.vue";
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('')

// 从 LocalStorage 中读取 activeName
const storedActiveName = localStorage.getItem('activeTabName') || 'first' // 默认值为 'first'
activeName.value = storedActiveName

const handleClick = (tab: { props: { name: string } }) => {
  activeName.value = tab.props.name
  localStorage.setItem('activeTabName', activeName.value) // 更新 LocalStorage
  console.log(activeName.value)
}

</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-tabs__nav is-top{
  font-size: 32px;
  font-weight: 600;
}
</style>
